<template>
    <div>
        <XtxBread>
            <XtxBreadItem to='/'>首页</XtxBreadItem>
            <XtxBreadItem v-if="value.a" :to='"/category/"+value.a.id'>{{value.a.name}}</XtxBreadItem>
            <XtxBreadItem v-if="value.b">{{value.b.name}}</XtxBreadItem>
        </XtxBread>
    </div>
</template>
<script>
import { computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
    const route = useRoute()
    // const list = store.state.category.list
    // console.log(store.state.category.list, route)
    const value = computed(() => {
      let c = reactive({})
      store.state.category.list.forEach(a => {
        if (a.children) {
          a.children.forEach(b => {
            if (b.id === route.params.id) {
            //   console.log(a, b)
              c = { a: a, b: b }
            }
          })
        }
      })
      return c
    })
    return { value }
  }
}
</script>
